<template>
	<view class="page">
		<image class="bg-blur-1" src="../../static/icons/412.png" />

		<view class="group">
			<view class="register-button" @tap="$goto('/pages/login/register')">
				<text>去注册</text>
			</view>
			<view class="background-container">
				<text class="welcome-text">欢迎登陆</text>
				<text class="font account-title">账号</text>
				<view class="email-display">
					<input type="text" placeholder="请输账号" v-model="username" maxlength="50" />
				</view>
				<text class="font account-password">密码</text>
				<view class="email-display2">
					<input type="password" placeholder="请输入密码" v-model="password" maxlength="50"
						style="color: black;" />
				</view>
			</view>
		</view>

		<view class="input-container">
			<view class="login-button"  @tap="login()">
				<text class="login-text">登录</text>
			</view>
			<!-- <text class="forgot-password">忘记密码?</text> -->
		</view>

		<!-- <view class="image-wrapper">
			<view class="img">
				<image src="../../static/icons/icon1.png" mode=""></image>
			</view>
			<view class="img2">
				<image src="../../static/icons/icon2.png" mode=""></image>
			</view>
		</view> -->
		<uv-toast ref="toast"></uv-toast>
	</view>

</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { useStore } from 'vuex';
	import { post } from '../../common/request';
	import { userKey } from '../../src/store';

	const username = ref('');
	const password = ref('');
	const toast = ref(null);
	const obj = useStore(userKey);
	const login = async () => {
		const ret = await post('api/login', {
			username: username.value,
			password: password.value
		});
		if (ret['code'] == 200) {
			//写入vuex
			toast.value.show({
				type: 'default',
				message: '登录成功'
			});
			setUserinfo(ret['data']);
			uni.switchTab({
				url: '/pages/index/index'
			});
		} else {
			toast.value.show({
				type: 'default',
				message: ret['msg']
			});
		}
	}
	const setUserinfo = (data : {}) => {
		obj.commit('setUserinfo', {
			username: data['username'],
			token: 'xxxxx',
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(180deg, #ffffff 25.4%, #dcfcea 68.9%);
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		position: relative;
	}

	.group {
		// padding: 436rpx 40rpx 140rpx;
		position: relative;
	}

	.font {
		font-size: 32rpx;
		color: #bbbbc4;
	}

	.account-title {
		margin-top: 80rpx;
		line-height: 30rpx;
	}

	.account-password {
		margin-top: 40rpx;
		line-height: 30rpx;
	}

	.password-title {
		margin-top: 140rpx;
		line-height: 30rpx;
	}

	.background-container {
		margin-top: 130rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.bg-blur-1,
	.bg-blur-2 {
		width: 100vw; // 设置为视口宽度
		height: auto; // 或者根据需要设置明确的高度
	}

	.bg-blur-1 {
		position: absolute;
		left: 200rpx;
		width: 656rpx;
		height: 752rpx;
		opacity: 0.5;
		filter: blur(100rpx);
	}

	.bg-blur-2 {
		position: absolute;
		left: -350rpx;
		// width: 656rpx;
		// height: 352rpx;
		opacity: 0.5;
		filter: blur(100rpx);
	}

	.register-button {
		margin-left: 30rpx;
		margin-top: 120rpx;
		width: 150rpx;
		padding: 16rpx;
		border: 2rpx solid #022e57;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.register-button text {
		color: #022e57;
		font-size: 28rpx;
		line-height: 26.3rpx;
		font-family: HarmonyOSSansSC;
	}

	.welcome-text {
		left: 42rpx;
		top: 300rpx;
		color: #022e57;
		font-size: 64rpx;
		font-weight: 700;
		line-height: 60.16rpx;
		font-family: HarmonyOSSansSC;
	}

	.email-display {
		margin-top: 30rpx;
		padding: 36rpx 0 28rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.email-display input {
		margin-left: 36rpx;
		color: #08021c;
		font-size: 36rpx;
		line-height: 36rpx;
		font-family: HarmonyOSSansSC;
	}

	.email-display2 {
		margin-top: 30rpx;
		padding: 36rpx 0 28rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.email-display2 input {
		margin-left: 36rpx;
		color: #08021c;
		font-size: 36rpx;
		line-height: 36rpx;
		font-family: HarmonyOSSansSC;
	}

	.image-wrapper {
		margin-top: 70rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 40rpx;
		text-align: center;
		width: 100%;

		image {
			height: 100rpx;
			width: 100rpx;
			margin: 20rpx;
		}
	}



	.input-container {
		margin-top: 40rpx;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-button {
		width: 100%;
		padding: 30rpx 0;
		background-image: linear-gradient(98.8deg, #fff157 -272.1%, #7eff2e 372.1%);
		border-radius: 16rpx;
		text-align: center;
	}

	.login-text {
		color: #022e57;
		font-size: 34rpx;
		line-height: 34rpx;
	}

	.forgot-password {
		margin-top: 50rpx;
		color: #bbbbc4;
		font-size: 32rpx;
	}
</style>